React Axios常見問題

身體不是ING，後續再給大家補上

1. Post給出錯誤請求的資源上不存在“Access‑Control‑Allow‑Origin”標頭 (Axios Post in react js is giving error No 'Access‑Control‑Allow‑Origin' header is present on the requested resource)

方法一. 添加proxy到package.json

  },
  "proxy": "http://localhost:8080",
  "devDependencies": {

然後增加localhost之後的資訊

axios.get("/member/login")

方法二. 在spring boot添加CORS過濾器配置，並將application/x-www-form-urlencoded添加到axios請求中

export const addProjectTask = (username,password, history) => async dispatch => {

axios.post('http://localhost:8080/member/login', 
  Qs.stringify({
  username: username,
  password: password
  }), {
  headers: { 
  "Content‑Type": "application/x‑www‑form‑urlencoded"
}})
.then(function (response) {
  console.log(response);
  history.push("/");  
})
.catch(function (error) {
  console.log(error);
});
};

方法三. 建立proxy來調用API，並定向到相對應的服務器

• Install http‑proxy‑middleware

    npm install http‑proxy‑middleware ‑‑save

• create src/setupProxy.js

    const proxy = require('http‑proxy‑middleware');

    module.exports = function(app) {
        app.use(proxy('/api', { target: 'http://localhost:8080/' }));

    };

• Then run your local Dev server